<div id="vpb_pop_up_background"></div><!-- General Pop-up Background -->
<!-- Login Box Starts Here -->
<div id="vpb_login_pop_up_box" class="vpb_signup_pop_up_box">
    <form class="form-horizontal" method="post" action="{$php5WebPath}/service/main_login/">
      <fieldset>
        <h4 style="color:#fff;text-align:center">LOG-IN</h4>
        <div class="control-group">
        <label class="control-label" for="input01">Login Name :</label>
        <div class="controls">
          <input type="text" class="input-xlarge" id="input01" name="username">
         
        </div>
        </div>
         <div class="control-group">
        <label class="control-label" for="input11">Password :</label>
        <div class="controls">
          <input type="password" class="input-xlarge" id="input11" name="pwd">
         
        </div>
        </div>      
        <div class="form-actions">
        <button type="submit" class="btn btn-primary">Submit</button>
        <button class="btn btn-primary" type="button" onClick="vpb_hide_popup_boxes();">Cancel</button>
        <input type="hidden" name="task" value="login">
        </div>
      </fieldset>
    </form>
</div>

<!-- Login Box Ends Here -->

<!-- Sign Up Box Starts Here -->
<div id="vpb_signup_pop_up_box">
    <form class="form-horizontal" name="frmSignUp" method="post" onsubmit="return false;">
      <fieldset>
        <h4 style="color:#fff;text-align:center">SIGN UP FOR NEW ACCOUNT</h4>
        <div class="control-group">
        <label class="control-label" for="input01">Login Name <font color="#FF0000">*</font>:</label>
        <div class="controls">
          <input type="text" class="input-xlarge" id="input01" name="username">
         
        </div>
        </div>
         <div class="control-group">
        <label class="control-label" for="input11">Complete Name <font color="#FF0000">*</font>:</label>
        <div class="controls">
          <input type="text" class="input-xlarge" id="input11" name="name">
         
        </div>
        </div>
         <div class="control-group">
        <label class="control-label" for="input11">Password <font color="#FF0000">*</font>:</label>
        <div class="controls">
          <input type="password" class="input-xlarge" id="input11" name="newpassword">
         
        </div>
        </div>
         <div class="control-group">
        <label class="control-label" for="input11">Confirm Password <font color="#FF0000">*</font>:</label>
        <div class="controls">
          <input type="password" class="input-xlarge" id="input11" name="retypepassword">
         
        </div>
        </div>
         <div class="control-group">
        <label class="control-label" for="input11">Email Add <font color="#FF0000">*</font>:</label>
        <div class="controls">
          <input type="text" class="input-xlarge" id="input11" name="email">
         
        </div>
        </div>
         <div class="control-group">
        <label class="control-label" for="input11">Birthday(mm/dd/yyyy) <font color="#FF0000">*</font>:</label>
        <div class="controls">
          <input type="text" class="input-xlarge" id="input11" name="birthday">
         
        </div>
        </div>
         <div class="control-group">
        <label class="control-label" for="input11">Address :</label>
        <div class="controls">
          <input type="text" class="input-xlarge" id="input11" name="address">
         
        </div>
        </div>
         <div class="control-group">
        <label class="control-label" for="input11">City / Province :</label>
        <div class="controls">
          <input type="text" class="input-xlarge" id="input11" name="city">
         
        </div>
        </div>
         <div class="control-group">
        <label class="control-label" for="input11">Country :</label>
        <div class="controls">
          <select name="country_id" id="country_id" class="selectpicker">
          	{html_options options=$countries selected=$country}
          </select>
         
        </div>
        </div>        
        <div class="form-actions">
        <button class="btn btn-primary" onClick="vpb_submit_form();" >Submit</button>
        <button class="btn btn-primary"  type="button" onClick="vpb_hide_popup_boxes();">Cancel</button>
        </div>
        <div id="response_brought"></div><!-- This will display the response from the server -->
      </fieldset>
      </form>
</div>
<!-- Sign Up Box Ends Here -->
{literal}
    <script>
      //This function is called automatically upon page load
      $(document).ready(function() 
      { 
        $("#vpb_pop_up_background").click(function()
        {
          $("#vpb_signup_pop_up_box").hide(); //Hides the sign-up box when clicked outside the form
		  $("#vpb_login_pop_up_box").hide();
          $("#vpb_pop_up_background").fadeOut("slow");
        });
      });

      //This function displays the sign-up box when called
      function vpb_show_sign_up_box()
      {
        $("#vpb_pop_up_background").css({
          "opacity": "0.4"
        });
        $("#vpb_pop_up_background").fadeIn("slow");
        $("#vpb_signup_pop_up_box").fadeIn('fast');
        window.scroll(0,0);
      }
	  //This function displays the login box when called
	  function vpb_show_login_box()
	  {
		  $("#vpb_pop_up_background").css({
			  "opacity": "0.4"
		  });
		  $("#vpb_pop_up_background").fadeIn("slow");
		  $("#vpb_login_pop_up_box").fadeIn('fast');
		  window.scroll(0,0);
	  }
      //This function hides both the Sign-up Box and Login Box when called
      function vpb_hide_popup_boxes()
      {
        $("#vpb_signup_pop_up_box").hide(); //Hides the sign-up box when clicked outside the form
		$("#vpb_login_pop_up_box").hide(); //Hides the login box when clicked outside the form
        $("#vpb_pop_up_background").fadeOut("slow");
      }
	  
		//This is the JS function that sends the mail - It is called when you click on the submit button which is in the form
		function vpb_submit_form()
		{			
			var dataString = 'username=' + document.frmSignUp.username.value + '&name=' + document.frmSignUp.name.value + '&email=' + document.frmSignUp.email.value + '&newpassword=' + document.frmSignUp.newpassword.value + '&retypepassword=' + document.frmSignUp.retypepassword.value+ '&birthday=' + document.frmSignUp.birthday.value+ '&address=' + document.frmSignUp.address.value+ '&city=' + document.frmSignUp.city.value + '&task=update';
			$.ajax({  
				type: "POST",  
				url: "ajax.php?o=register&m=m-main",  
				data: dataString,
				beforeSend: function() 
				{
					//Show loading image
					$("#response_brought").html('<br clear="all"><div align="left" style=" padding-top:6px; margin-left:100px; margin-top:15px;"><font style="font-family:Verdana, Geneva, sans-serif; font-size:12px; color:black;">Please wait</font> <img src="images/loading.gif" alt="Loading...." align="absmiddle" title="Loading...."/></div>');
					
				},  
				success: function(response)
				{
					//Check to see if the message is sent or not
					var response_brought = response.indexOf('Congrats');
					//if( response_brought != -1 )
					response = response.replace(/^\s+|\s+$/g, '');
					if( response != 'done' )
					{
						//Display success message if the message is sent
						$("#response_brought").html(response);
						
						//Remove the success message also after a while of displaying the message to the user
						setTimeout(function() {
							//$("#response_brought").html('');
						},5000);
					}  
					else  
					{
						//Display error message is the message is not sent
						 //$("#response_brought").html(response);
						 document.frmSignUp.reset();
						 alert('Account created successfully. Please check your email to active');
						 vpb_hide_popup_boxes();
					}
				}
			});
			
		}	  
    </script>
{/literal}